<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>烟草零售合规检查系统 - 核心界面</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CBCB',
            success: '#00B42A',
            warning: '#FF7D00',
            danger: '#F53F3F',
            info: '#86909C',
            light: '#F2F3F5',
            dark: '#1D2129',
          },
          fontFamily: {
            inter: ['Inter', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-thin {
        scrollbar-width: thin;
      }
      .scrollbar-thin::-webkit-scrollbar {
        width: 4px;
      }
      .scrollbar-thin::-webkit-scrollbar-thumb {
        background-color: rgba(156, 163, 175, 0.5);
        border-radius: 2px;
      }
      .card-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }
      .transition-custom {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }
    }
  </style>
</head>

<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-sm sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <div class="flex items-center space-x-2">
        <i class="fa fa-shield text-primary text-2xl"></i>
        <h1 class="text-xl font-semibold text-primary">烟草零售合规检查系统</h1>
      </div>
      
      <nav class="hidden md:flex items-center space-x-6">
        <a href="#document-review" class="text-dark hover:text-primary transition-custom">文书审查</a>
        <a href="#video-review" class="text-dark hover:text-primary transition-custom">视频审查</a>
        <a href="#compliance-dashboard" class="text-dark hover:text-primary transition-custom">合规驾驶舱</a>
      </nav>
      
      <div class="flex items-center space-x-4">
        <button class="p-2 rounded-full hover:bg-gray-100 transition-custom">
          <i class="fa fa-bell-o text-dark"></i>
        </button>
        <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-primary">
          <i class="fa fa-user"></i>
        </div>
        <button class="md:hidden p-2 rounded-full hover:bg-gray-100 transition-custom">
          <i class="fa fa-bars text-dark"></i>
        </button>
      </div>
    </div>
  </header>

  <main class="flex-grow container mx-auto px-4 py-6">
    <!-- 文书审查工作台 -->
    <section id="document-review" class="mb-16">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-semibold">文书审查工作台</h2>
        <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">核心功能</span>
      </div>
      
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        <!-- 左侧面板 - 上传与模板 -->
        <div class="lg:col-span-3 space-y-6">
          <div class="bg-white rounded-xl p-5 card-shadow">
            <h3 class="text-lg font-medium mb-4 flex items-center">
              <i class="fa fa-upload text-primary mr-2"></i>文书上传
            </h3>
            <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-primary transition-custom cursor-pointer">
              <i class="fa fa-file-text-o text-3xl text-gray-400 mb-3"></i>
              <p class="text-gray-500 mb-2">拖放文件至此处或点击上传</p>
              <p class="text-xs text-gray-400">支持 DOC/PDF/TXT 格式，最大 50MB</p>
              <button class="mt-4 px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90 transition-custom">
                选择文件
              </button>
            </div>
          </div>
          
          <div class="bg-white rounded-xl p-5 card-shadow">
            <h3 class="text-lg font-medium mb-4 flex items-center">
              <i class="fa fa-file-text text-primary mr-2"></i>格式模板
            </h3>
            <div class="space-y-3">
              <button class="w-full text-left px-4 py-2 bg-primary/10 text-primary rounded-lg text-sm font-medium hover:bg-primary/20 transition-custom">
                <i class="fa fa-file-word-o mr-2"></i>公文模板
              </button>
              <button class="w-full text-left px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-custom">
                <i class="fa fa-file-text-o mr-2"></i>合同模板
              </button>
              <button class="w-full text-left px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-custom">
                <i class="fa fa-file-text-o mr-2"></i>报告模板
              </button>
              <button class="w-full text-left px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-custom">
                <i class="fa fa-file-text-o mr-2"></i>其他模板
              </button>
            </div>
          </div>
        </div>
        
        <!-- 右侧面板 - 审查结果 -->
        <div class="lg:col-span-9 space-y-6">
          <div class="bg-white rounded-xl p-5 card-shadow">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-medium">审查结果预览</h3>
              <div class="flex space-x-2">
                <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-custom">
                  <i class="fa fa-print mr-1"></i> 打印
                </button>
                <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-custom">
                  <i class="fa fa-download mr-1"></i> 导出
                </button>
              </div>
            </div>
            
            <div class="border border-gray-200 rounded-lg overflow-hidden h-[400px]">
              <div class="p-4 bg-gray-50 border-b border-gray-200 flex justify-between items-center">
                <div class="flex items-center space-x-2">
                  <span class="h-2 w-2 rounded-full bg-success"></span>
                  <span class="text-sm font-medium">文档: 烟草零售许可证申请.docx</span>
                </div>
                <div class="flex items-center space-x-4 text-sm text-gray-500">
                  <span><i class="fa fa-check-circle text-success mr-1"></i> 格式检查</span>
                  <span><i class="fa fa-check-circle text-success mr-1"></i> 语义检查</span>
                  <span><i class="fa fa-spinner fa-spin text-info mr-1"></i> 合规审查</span>
                </div>
              </div>
              
              <div class="p-6 overflow-y-auto scrollbar-thin">
                <div class="prose max-w-none">
                  <h1 class="text-xl font-semibold mb-2">烟草零售许可证新办申请表</h1>
                  <p class="mb-4">申请人：<span class="border-b border-dashed border-danger p-0.5">张三三</span>（需与身份证姓名一致）</p>
                  <p class="mb-4">经营地址：<span class="bg-yellow-100 text-yellow-800 px-1 py-0.5 rounded">XX市XX区XX路XX号（距离XX小学50米，需≥100米）</span></p>
                  <p class="mb-4">申请类型：新办 □ 延续 □ 变更 □ <span class="text-red-500 line-through">注销</span> <span class="border-b border-dashed border-danger p-0.5">新办</span></p>
                  <p class="mb-4">经营范围：卷烟零售 □ 雪茄烟零售 □ 其他烟草制品零售 □</p>
                  <p class="mb-4">联系人：李四 <span class="text-green-500">联系电话：138XXXX5678</span></p>
                  <p class="mb-4">附：身份证复印件 □ 经营场所产权证明 □ 其他材料 □</p>
                  <div class="mt-6 p-4 bg-blue-50 border-l-4 border-primary">
                    <p class="text-sm text-blue-700"><i class="fa fa-info-circle mr-1"></i> 温馨提示：根据《烟草专卖许可证管理办法》，中小学周边100米内不得设置烟草零售点，请核实经营地址合规性。</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 审查日志 -->
          <div class="bg-white rounded-xl p-5 card-shadow">
            <h3 class="text-lg font-medium mb-4 flex items-center">
              <i class="fa fa-history text-primary mr-2"></i>审查日志
            </h3>
            <div class="space-y-3">
              <div class="p-3 bg-gray-50 rounded-lg">
                <div class="flex justify-between items-center mb-1">
                  <span class="text-sm font-medium">2025-06-17 14:32:15</span>
                  <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded">系统</span>
                </div>
                <p class="text-sm text-gray-600">格式规范化检查完成，发现2处格式问题，已自动修正。</p>
              </div>
              <div class="p-3 bg-gray-50 rounded-lg">
                <div class="flex justify-between items-center mb-1">
                  <span class="text-sm font-medium">2025-06-17 14:32:30</span>
                  <span class="text-xs bg-primary/10 text-primary px-2 py-0.5 rounded">系统</span>
                </div>
                <p class="text-sm text-gray-600">语义和语法纠错完成，发现3处错别字，1处语法问题，修正建议已标注。</p>
              </div>
              <div class="p-3 bg-gray-50 rounded-lg">
                <div class="flex justify-between items-center mb-1">
                  <span class="text-sm font-medium">2025-06-17 14:33:05</span>
                  <span class="text-xs bg-warning/10 text-warning px-2 py-0.5 rounded">人工复审</span>
                </div>
                <p class="text-sm text-gray-600">经营地址合规性存疑，已提交人工复审（距离中小学不足100米）。</p>
              </div>
              <div class="p-3 bg-gray-50 rounded-lg">
                <div class="flex justify-between items-center mb-1">
                  <span class="text-sm font-medium">2025-06-17 14:35:20</span>
                  <span class="text-xs bg-success/10 text-success px-2 py-0.5 rounded">完成</span>
                </div>
                <p class="text-sm text-gray-600">人工复审完成，确认经营地址不符合要求，已驳回申请。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 视频审查中心 -->
    <section id="video-review" class="mb-16">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-semibold">视频审查中心</h2>
        <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">核心功能</span>
      </div>
      
      <div class="bg-white rounded-xl p-5 card-shadow">
        <div class="flex flex-col lg:flex-row gap-6">
          <!-- 视频控制区 -->
          <div class="lg:w-2/3 space-y-6">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-medium">视频审查 - 零售户现场检查记录</h3>
              <div class="flex space-x-2">
                <button class="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-custom">
                  <i class="fa fa-upload mr-1"></i> 上传视频
                </button>
                <button class="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-custom">
                  <i class="fa fa-download mr-1"></i> 导出报告
                </button>
              </div>
            </div>
            
            <!-- 视频播放器 -->
            <div class="relative aspect-video bg-black rounded-lg overflow-hidden">
              <video class="w-full h-full object-cover" controls>
                <source src="#" type="video/mp4">
                您的浏览器不支持视频播放
              </video>
              <div class="absolute top-3 right-3 bg-black/70 text-white text-xs px-2 py-1 rounded">
                <i class="fa fa-clock-o mr-1"></i> 03:45 / 05:20
              </div>
            </div>
            
            <!-- 时间轴 -->
            <div class="relative h-12 bg-gray-100 rounded-lg overflow-hidden">
              <div class="absolute top-0 left-0 h-full w-1/3 bg-primary/20"></div>
              <div class="absolute top-0 left-1/3 h-full w-1/3 bg-primary/40"></div>
              <div class="absolute top-0 left-2/3 h-full w-1/3 bg-primary/60"></div>
              
              <div class="absolute top-1/2 -translate-y-1/2 left-[20%] w-2 h-2 bg-danger rounded-full border-2 border-white shadow-lg" 
                   title="亮证异常: 00:48"></div>
              <div class="absolute top-1/2 -translate-y-1/2 left-[45%] w-2 h-2 bg-warning rounded-full border-2 border-white shadow-lg" 
                   title="疑似违规用语: 01:52"></div>
              <div class="absolute top-1/2 -translate-y-1/2 left-[70%] w-2 h-2 bg-danger rounded-full border-2 border-white shadow-lg" 
                   title="亮证异常: 02:58"></div>
              
              <div class="absolute inset-0 flex items-center">
                <div class="w-full h-1 bg-gray-300 mx-2">
                  <div class="h-full bg-primary rounded" style="width: 40%"></div>
                </div>
              </div>
            </div>
            
            <!-- 多窗口展示区 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="border border-gray-200 rounded-lg overflow-hidden">
                <div class="p-3 bg-gray-50 border-b border-gray-200 text-sm font-medium">
                  <i class="fa fa-id-card-o text-primary mr-1"></i> 亮证识别结果
                </div>
                <div class="p-4">
                  <div class="text-center py-4">
                    <img src="https://picsum.photos/400/200?random=1" alt="证件识别" class="max-w-full h-40 object-contain mx-auto rounded border border-gray-200">
                  </div>
                  <div class="mt-3 space-y-2">
                    <div class="flex justify-between text-sm">
                      <span class="text-gray-500">证件类型</span>
                      <span class="font-medium">烟草专卖执法证</span>
                    </div>
                    <div class="flex justify-between text-sm">
                      <span class="text-gray-500">持证人</span>
                      <span class="font-medium">李四</span>
                    </div>
                    <div class="flex justify-between text-sm">
                      <span class="text-gray-500">证号</span>
                      <span class="font-medium">YC6101032025001</span>
                    </div>
                    <div class="flex justify-between text-sm">
                      <span class="text-gray-500">有效期</span>
                      <span class="font-medium">2025-12-31</span>
                    </div>
                    <div class="flex justify-between text-sm">
                      <span class="text-gray-500">识别状态</span>
                      <span class="font-medium text-danger"><i class="fa fa-exclamation-triangle mr-1"></i> 部分遮挡</span>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="border border-gray-200 rounded-lg overflow-hidden">
                <div class="p-3 bg-gray-50 border-b border-gray-200 text-sm font-medium">
                  <i class="fa fa-comment-o text-primary mr-1"></i> 语音文本转录
                </div>
                <div class="p-4 overflow-y-auto h-48 scrollbar-thin">
                  <div class="space-y-3">
                    <div class="flex">
                      <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-2 flex-shrink-0">
                        <i class="fa fa-user"></i>
                      </div>
                      <div>
                        <p class="text-sm font-medium">执法人员：</p>
                        <p class="text-sm text-gray-600">你好，我们是烟草专卖局执法人员，这是我们的执法证件，请配合检查。</p>
                      </div>
                    </div>
                    <div class="flex">
                      <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 mr-2 flex-shrink-0">
                        <i class="fa fa-user-o"></i>
                      </div>
                      <div>
                        <p class="text-sm font-medium">零售户：</p>
                        <p class="text-sm text-gray-600">好的，你们要检查什么？我这都是正规渠道进的货。</p>
                      </div>
                    </div>
                    <div class="flex">
                      <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-2 flex-shrink-0">
                        <i class="fa fa-user"></i>
                      </div>
                      <div>
                        <p class="text-sm font-medium">执法人员：</p>
                        <p class="text-sm text-gray-600"><span class="bg-yellow-100 text-yellow-800 px-1 py-0.5 rounded">我们发现你这里有几包烟的码不对，可能是走私烟</span>，请出示进货单据。</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 右侧审查面板 -->
          <div class="lg:w-1/3 space-y-6">
            <div class="border border-gray-200 rounded-lg overflow-hidden">
              <div class="p-3 bg-gray-50 border-b border-gray-200 text-sm font-medium">
                <i class="fa fa-ban text-primary mr-1"></i> 规范用语审查
              </div>
              <div class="p-4">
                <div class="mb-4">
                  <h4 class="text-sm font-medium mb-2">敏感词检测</h4>
                  <div class="space-y-2">
                    <div class="flex items-center justify-between p-2 bg-danger/10 border-l-4 border-danger rounded-r-lg">
                      <span class="text-sm font-medium text-danger">走私烟</span>
                      <span class="text-xs bg-danger/20 text-danger px-2 py-0.5 rounded">高风险</span>
                    </div>
                    <div class="flex items-center justify-between p-2 bg-warning/10 border-l-4 border-warning rounded-r-lg">
                      <span class="text-sm font-medium text-warning">码不对</span>
                      <span class="text-xs bg-warning/20 text-warning px-2 py-0.5 rounded">中风险</span>
                    </div>
                    <div class="flex items-center justify-between p-2 bg-gray-100 border-l-4 border-gray-300 rounded-r-lg">
                      <span class="text-sm font-medium text-gray-700">正规渠道</span>
                      <span class="text-xs bg-gray-200 text-gray-600 px-2 py-0.5 rounded">正常</span>
                    </div>
                  </div>
                </div>
                
                <div class="mb-4">
                  <h4 class="text-sm font-medium mb-2">语义合规评分</h4>
                  <div class="relative h-20">
                    <canvas id="semanticChart"></canvas>
                  </div>
                  <div class="flex justify-between text-xs text-gray-500 mt-2">
                    <span>0分</span>
                    <span>50分</span>
                    <span>100分</span>
                  </div>
                </div>
                
                <div>
                  <h4 class="text-sm font-medium mb-2">情绪分析</h4>
                  <div class="relative h-20">
                    <canvas id="emotionChart"></canvas>
                  </div>
                  <div class="flex justify-between text-xs text-gray-500 mt-2">
                    <span>冷静</span>
                    <span>中性</span>
                    <span>激动</span>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="border border-gray-200 rounded-lg overflow-hidden">
              <div class="p-3 bg-gray-50 border-b border-gray-200 text-sm font-medium">
                <i class="fa fa-flag text-primary mr-1"></i> 审查结论
              </div>
              <div class="p-4">
                <div class="bg-yellow-50 border-l-4 border-yellow-400 p-3 mb-4">
                  <h4 class="text-sm font-medium text-yellow-800 mb-2">存在问题</h4>
                  <ul class="text-sm text-gray-600 list-disc pl-5 space-y-1">
                    <li>执法人员亮证过程存在遮挡，证件信息识别不完整</li>
                    <li>对话中出现"走私烟"敏感词，需进一步核实</li>
                  </ul>
                </div>
                
                <div class="mb-4">
                  <h4 class="text-sm font-medium mb-2">合规评分</h4>
                  <div class="flex items-center">
                    <div class="w-16 h-16 rounded-full border-4 border-primary/20 flex items-center justify-center mr-4">
                      <span class="text-2xl font-bold text-primary">76</span>
                    </div>
                    <div>
                      <div class="flex items-center mb-1">
                        <div class="w-full bg-gray-200 rounded-full h-2.5">
                          <div class="bg-primary h-2.5 rounded-full" style="width: 76%"></div>
                        </div>
                        <span class="ml-2 text-sm font-medium">76分</span>
                      </div>
                      <p class="text-xs text-gray-500">良好，存在部分问题需改进</p>
                    </div>
                  </div>
                </div>
                
                <button class="w-full py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90 transition-custom">
                  生成审查报告
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 合规驾驶舱 -->
    <section id="compliance-dashboard">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-semibold">合规驾驶舱</h2>
        <span class="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium">核心功能</span>
      </div>
      
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        <!-- 数据概览卡片 -->
        <div class="lg:col-span-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
          <div class="bg-white rounded-xl p-5 card-shadow">
            <div class="flex items-start justify-between">
              <div>
                <p class="text-gray-500 text-sm mb-1">今日审查量</p>
                <h3 class="text-2xl font-bold">186</h3>
                <p class="text-success text-sm mt-1 flex items-center">
                  <i class="fa fa-arrow-up mr-1"></i> 12% 较昨日
                </p>
              </div>
              <div class="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                <i class="fa fa-file-text-o text-xl"></i>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-xl p-5 card-shadow">
            <div class="flex items-start justify-between">
              <div>
                <p class="text-gray-500 text-sm mb-1">高风险项</p>
                <h3 class="text-2xl font-bold">12</h3>
                <p class="text-danger text-sm mt-1 flex items-center">
                  <i class="fa fa-arrow-up mr-1"></i> 5% 较昨日
                </p>
              </div>
              <div class="h-12 w-12 rounded-full bg-danger/10 flex items-center justify-center text-danger">
                <i class="fa fa-exclamation-triangle text-xl"></i>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-xl p-5 card-shadow">
            <div class="flex items-start justify-between">
              <div>
                <p class="text-gray-500 text-sm mb-1">平均审查耗时</p>
                <h3 class="text-2xl font-bold">4.8分钟</h3>
                <p class="text-success text-sm mt-1 flex items-center">
                  <i class="fa fa-arrow-down mr-1"></i> 8% 较昨日
                </p>
              </div>
              <div class="h-12 w-12 rounded-full bg-secondary/10 flex items-center justify-center text-secondary">
                <i class="fa fa-clock-o text-xl"></i>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-xl p-5 card-shadow">
            <div class="flex items-start justify-between">
              <div>
                <p class="text-gray-500 text-sm mb-1">模型准确率</p>
                <h3 class="text-2xl font-bold">92.3%</h3>
                <p class="text-success text-sm mt-1 flex items-center">
                  <i class="fa fa-arrow-up mr-1"></i> 2% 较上周
                </p>
              </div>
              <div class="h-12 w-12 rounded-full bg-success/10 flex items-center justify-center text-success">
                <i class="fa fa-check-circle text-xl"></i>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 数据图表区 -->
        <div class="lg:col-span-8 space-y-6">
          <div class="bg-white rounded-xl p-5 card-shadow">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-medium">审查量趋势分析</h3>
              <div class="flex space-x-2">
                <button class="px-3 py-1 bg-primary text-white rounded-lg text-sm">今日</button>
                <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-custom">本周</button>
                <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-custom">本月</button>
              </div>
            </div>
            <div class="h-[300px]">
              <canvas id="reviewTrendChart"></canvas>
            </div>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="bg-white rounded-xl p-5 card-shadow">
              <h3 class="text-lg font-medium mb-4">错误类型分布</h3>
              <div class="h-[200px]">
                <canvas id="errorTypeChart"></canvas>
              </div>
            </div>
            
            <div class="bg-white rounded-xl p-5 card-shadow">
              <h3 class="text-lg font-medium mb-4">模型准确率波动</h3>
              <div class="h-[200px]">
                <canvas id="accuracyChart"></canvas>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 风险预警与系统监控 -->
        <div class="lg:col-span-4 space-y-6">
          <div class="bg-white rounded-xl p-5 card-shadow">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-medium">高风险项预警</h3>
              <a href="#" class="text-primary text-sm hover:underline">查看全部</a>
            </div>
            <div class="space-y-4 max-h-[300px] overflow-y-auto scrollbar-thin">
              <div class="p-3 bg-danger/5 border-l-4 border-danger rounded-r-lg">
                <div class="flex justify-between items-start">
                  <div>
                    <h4 class="text-sm font-medium text-danger">零售许可证超范围经营</h4>
                    <p class="text-xs text-gray-500 mt-1">文书: XX超市进货单.docx</p>
                  </div>
                  <span class="text-xs bg-danger/20 text-danger px-2 py-0.5 rounded">高风险</span>
                </div>
                <p class="text-sm text-gray-600 mt-2 line-clamp-2">检测到该进货单中包含非烟草制品类商品，可能存在超范围经营风险，需人工复审。</p>
                <div class="mt-3 flex justify-between items-center text-xs text-gray-500">
                  <span>2025-06-17 10:23</span>
                  <button class="text-primary hover:underline">处理</button>
                </div>
              </div>
              
              <div class="p-3 bg-warning/5 border-l-4 border-warning rounded-r-lg">
                <div class="flex justify-between items-start">
                  <div>
                    <h4 class="text-sm font-medium text-warning">疑似向未成年人售烟</h4>
                    <p class="text-xs text-gray-500 mt-1">视频: 光明路商店检查.mp4</p>
                  </div>
                  <span class="text-xs bg-warning/20 text-warning px-2 py-0.5 rounded">中风险</span>
                </div>
                <p class="text-sm text-gray-600 mt-2 line-clamp-2">视频中出现疑似未成年人购买行为，售货员未要求出示身份证件，存在违规风险。</p>
                <div class="mt-3 flex justify-between items-center text-xs text-gray-500">
                  <span>2025-06-17 09:45</span>
                  <button class="text-primary hover:underline">处理</button>
                </div>
              </div>
              
              <div class="p-3 bg-danger/5 border-l-4 border-danger rounded-r-lg">
                <div class="flex justify-between items-start">
                  <div>
                    <h4 class="text-sm font-medium text-danger">亮证不规范</h4>
                    <p class="text-xs text-gray-500 mt-1">视频: 市场街巡查记录.mp4</p>
                  </div>
                  <span class="text-xs bg-danger/20 text-danger px-2 py-0.5 rounded">高风险</span>
                </div>
                <p class="text-sm text-gray-600 mt-2 line-clamp-2">执法人员亮证过程不完整，证件信息未完全展示，不符合执法规范要求。</p>
                <div class="mt-3 flex justify-between items-center text-xs text-gray-500">
                  <span>2025-06-16 16:12</span>
                  <button class="text-primary hover:underline">处理</button>
                </div>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-xl p-5 card-shadow">
            <h3 class="text-lg font-medium mb-4">系统运行监控</h3>
            <div class="space-y-4">
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span>GPU利用率</span>
                  <span>68%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div class="bg-primary h-2 rounded-full" style="width: 68%"></div>
                </div>
              </div>
              
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span>CPU利用率</span>
                  <span>42%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div class="bg-primary h-2 rounded-full" style="width: 42%"></div>
                </div>
              </div>
              
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span>内存占用</span>
                  <span>56%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div class="bg-primary h-2 rounded-full" style="width: 56%"></div>
                </div>
              </div>
              
              <div>
                <div class="flex justify-between text-sm mb-1">
                  <span>模型推理耗时</span>
                  <span>2.4秒</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                  <div class="bg-primary h-2 rounded-full" style="width: 70%"></div>
                </div>
              </div>
              
              <div class="pt-4 border-t border-gray-100">
                <h4 class="text-sm font-medium mb-2">规则库更新</h4>
                <div class="flex items-center">
                  <div class="w-full bg-gray-200 rounded-full h-2.5 mr-3">
                    <div class="bg-primary h-2.5 rounded-full" style="width: 85%"></div>
                  </div>
                  <span class="text-xs">85% 已更新</span>
                </div>
                <p class="text-xs text-gray-500 mt-1">敏感词库本月更新进度，预计今日完成全部更新</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer class="bg-white border-t border-gray-200 py-6 mt-12">
    <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
      <p>© 2025 烟草零售合规检查系统 - 版权所有</p>
      <p class="mt-2">技术支持: XX科技有限公司</p>
    </div>
  </footer>

  <script>
    // 语义合规评分图表
    const semanticCtx = document.getElementById('semanticChart').getContext('2d');
    new Chart(semanticCtx, {
      type: 'line',
      data: {
        labels: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00'],
        datasets: [{
          label: '合规评分',
          data: [85, 72, 68, 75, 80, 76],
          borderColor: '#165DFF',
          backgroundColor: 'rgba(22, 93, 255, 0.1)',
          borderWidth: 2,
          tension: 0.4,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { display: false }, y: { display: false } }
      }
    });
    
    // 情绪分析图表
    const emotionCtx = document.getElementById('emotionChart').getContext('2d');
    new Chart(emotionCtx, {
      type: 'line',
      data: {
        labels: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00'],
        datasets: [{
          label: '情绪指数',
          data: [30, 45, 60, 40, 35, 42],
          borderColor: '#FF7D00',
          backgroundColor: 'rgba(255, 125, 0, 0.1)',
          borderWidth: 2,
          tension: 0.4,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: { x: { display: false }, y: { display: false } }
      }
    });
    
    // 审查量趋势图表
    const trendCtx = document.getElementById('reviewTrendChart').getContext('2d');
    new Chart(trendCtx, {
      type: 'line',
      data: {
        labels: ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00'],
        datasets: [{
          label: '文书审查',
          data: [12, 25, 34, 28, 42, 30, 15],
          borderColor: '#165DFF',
          backgroundColor: 'rgba(22, 93, 255, 0.1)',
          borderWidth: 2,
          tension: 0.4,
          fill: true
        }, {
          label: '视频审查',
          data: [5, 8, 12, 15, 10, 7, 3],
          borderColor: '#36CBCB',
          backgroundColor: 'rgba(54, 203, 203, 0.1)',
          borderWidth: 2,
          tension: 0.4,
          fill: true
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { position: 'top' } },
        scales: {
          y: { beginAtZero: true }
        }
      }
    });
    
    // 错误类型分布图表
    const errorCtx = document.getElementById('errorTypeChart').getContext('2d');
    new Chart(errorCtx, {
      type: 'doughnut',
      data: {
        labels: ['格式错误', '错别字', '语义矛盾', '业务合规', '其他'],
        datasets: [{
          data: [32, 28, 15, 18, 7],
          backgroundColor: [
            '#165DFF',
            '#36CBCB',
            '#FF7D00',
            '#F53F3F',
            '#86909C'
          ],
          borderWidth: 0
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { position: 'right' } },
        cutout: '70%'
      }
    });
    
    // 准确率波动图表
    const accuracyCtx = document.getElementById('accuracyChart').getContext('2d');
    new Chart(accuracyCtx, {
      type: 'bar',
      data: {
        labels: ['格式检查', '语义纠错', '业务合规', '亮证审查', '敏感词匹配', '语义分类'],
        datasets: [{
          label: '准确率',
          data: [98.5, 94, 91, 94, 97, 90],
          backgroundColor: [
            'rgba(22, 93, 255, 0.7)',
            'rgba(22, 93, 255, 0.7)',
            'rgba(22, 93, 255, 0.7)',
            'rgba(22, 93, 255, 0.7)',
            'rgba(22, 93, 255, 0.7)',
            'rgba(22, 93, 255, 0.7)'
          ],
          borderWidth: 0
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
          y: { 
            beginAtZero: true,
            max: 100,
            ticks: { callback: function(value) { return value + '%'; } }
          }
        }
      }
    });
    
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
          behavior: 'smooth'
        });
      });
    });
  </script>
</body>
</html>
